<template>
	<view>
		<view class="head-nav">
			<view class="n-l" :class="navIndex==0?'activite':''" @click="checkIndex(0)">我的道具<view class="icons"></view></view>
			<view class="n-l" :class="navIndex==1?'activite':''" @click="checkIndex(1)">道具商城<view class="icons"></view></view>
		</view>
		<!-- 内容切换 -->
		<view class="content" v-if="navIndex==0">
			<view class="fc-66 fs-26 text-tr pad-right-25" @click="lookRecord">使用记录</view>
			<view class="height-25"></view>
			<view class="tool-1 mar-top-30 bg-bec" v-for="(item,index) in toolcar" :class="[item.type==2 ? 'bg-67e' : '',item.type== 3 ? 'bg-93a' : '',item.type == 4 ? 'bg-f89' : '']">
				<view class="flex jed">
					<i class="clickbtn" @click="useNum(item,-1)">-</i>
					<input type="number" v-model="item.useCount" class="w-100" disabled/>
					<i class="clickbtn" @click="useNum(item,1)">+</i>
				</view>
				<view class="tool-bot flex">
					<view class="flex flex-1">
						<image :src="item.img" class="djimg"></image>
						<view class="flex-1">
							<view class="fc-32 fc-ff">{{item.title}}</view>
							<view class="fs-26 fc-ff">{{item.des}}</view>
						</view>
					</view>
					<view class="flex r-pos">
						<view class="goumai mar-left-20">使用</view>
					</view>					
				</view>
			</view>			
		</view>
		<view class="content" v-if="navIndex==1">
			<view class="tool-1 mar-top-30 bg-bec" v-for="(item,index) in toolcar" :class="[item.type==2 ? 'bg-67e' : '',item.type== 3 ? 'bg-93a' : '',item.type == 4 ? 'bg-f89' : '']">
				<view class="flex jed">
					<i class="clickbtn" @click="GoodsNum(item,-1)">-</i>
					<input type="number" v-model="item.count" class="w-100" disabled/>
					<i class="clickbtn" @click="GoodsNum(item,1)">+</i>
				</view>
				<view class="tool-bot flex">
					<view class="flex flex-1">
						<image :src="item.img" class="djimg"></image>
						<view class="flex-1">
							<view class="fc-32 fc-ff">{{item.title}}</view>
							<view class="fs-26 fc-ff">{{item.des}}</view>
						</view>
					</view>
					<view class="flex r-pos">
						<view class="fs-24 fc-ff lin-60">￥<text class="fc-ff fs-36">{{item.price}}</text></view>
						<view class="goumai mar-left-20" @click="BuyDaoju()">购买</view>
					</view>
					<!--总价和总数量 {{totalprice.toFixed(2)}}{{totalcount}} -->
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,				
				toolcar:[
					{
						title:'置顶卡',
						des:'将职位进行置顶',
						price:9.9,
						img:this.$mConfig.imgSrcUrl+'icon/dj1.png',
						type:1,
						count: 0,//购买数
						useCount:0,//使用数
						
					},
					{
						title:'畅聊卡',
						des:'沟通次数+30',
						price:9.9,
						img:this.$mConfig.imgSrcUrl+'icon/dj2.png',
						type:2,
						count: 0,
						useCount:0,
					},{
						title:'牛人卡',
						des:'直接沟通牛人次数+30',
						price:9.9,
						img:this.$mConfig.imgSrcUrl+'icon/dj3.png',
						type:3,
						count: 0,
						useCount:0,
					},
					{
						title:'急聘卡',
						des:'可升级为急聘岗位',
						price:9.9,
						img:this.$mConfig.imgSrcUrl+'icon/dj3.png',
						type:4,
						count: 0,
					}
					
				],
				totalprice: 0,
				totalcount: 0,
			}
		},
		methods: {
			checkIndex(index) {
				this.navIndex = index;
			},
			//使用数量
			useNum(item, val) {
				item.useCount = Math.max(item.useCount + val, 0);
				this.totalcount = 0;
				this.totalprice = 0;
				for (let g of this.toolcar) {					
					this.totalcount += g.useCount;//数量
					this.totalprice += g.useCount * g.price;//价格
				}
			},
			//购买数量
			GoodsNum(item, val) {
				item.count = Math.max(item.count + val, 0);
				this.totalcount = 0;
				this.totalprice = 0;
				for (let g of this.toolcar) {					
					this.totalcount += g.count;//数量
					this.totalprice += g.count * g.price;//价格
				}
			},
			//购买
			BuyDaoju(){
				let res = this.$apis.BuyDaoju(1);
				if(res){
					console.log(res)
				}
			},
			//使用记录
			lookRecord(){
				uni.navigateTo({
					url:'/pages/user/company/toolprop/record'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
		.flex-1{
			flex: 1;
		}
		.lin-60{
			line-height: 60rpx;
		}
		.head-nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			background: #fff;
			margin-bottom: 32rpx;			
			.n-l{
				width: 50%;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #969799;
				position: relative;
				.icons{
					display: none;
					width: 80rpx;
					height:6rpx;
					background: #84C0F4;
					border-radius: 4rpx;
					opacity: 1;	
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
			.activite>.icons{
				display: block;
			}	
		}		
			
		.content {			
			height: 100%;
			.tool-1{
				position: relative;
				width: 686rpx;
				height: 188rpx;
				background: #8EC7F9;
				border-radius: 8px;
				opacity: 1;
				margin: 0 auto 32rpx auto;
				.jed{
					justify-content: flex-end;
				}
				.clickbtn{
					margin: 20rpx 20rpx 0 ;
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					border: 1px solid #fff;
					line-height: 32rpx;
					display: block;
					text-align: center;
					color: #fff;
				}
				.w-100{
					width: 30rpx;
					height: 32rpx;
					position: relative;
					top: 15rpx;
					color: #fff;
				}
			}
			.tool-bot{
				padding: 0 26rpx;
				position: relative;
				.djimg{
					width: 100rpx;
					height: 92rpx;
					display: inline-block;
				}
				.r-pos{
					position: relative;
					top: 46rpx;
				}
				.goumai{
					width: 160rpx;
					height: 60rpx;
					opacity: 1;
					border: 1px solid #FFFFFF;
					line-height: 60rpx;
					text-align: center;
					color: #fff;
					border-radius: 8rpx;
				}
			}
			.bg-bec{
				background: #8EC7F9;
			}
			.bg-67e{
				background: #67E5CB;
			}
			.bg-93a{
				background: #93ADF2;
			}
			.bg-f89{
				background: #F89599;
			}
		}
	}
	
</style>
